<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>${fns:getConfig('productName')} 登录</title>
    <meta name="decorator" content="blank"/>
    <style>
        body {
            font-family: "simsun", "microsoft yahei", "simhei";
            font-size: 16px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            /*background: url("../images/body_bg.jpg") no-repeat left top;*/
            z-index: -9999;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .body_bg {
            width: 100%;
            position: absolute;
            z-index: -999;
            height: 100%;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .header {
            width: 100%;
            text-align: center;
            position: fixed;
            top: 12%;
        }

        .pl {
            padding-left: 400px;
            margin-left: 0 !important;
        }

        .header img {
            vertical-align: top;
            width: 45%;
        }

        .content {
            width: 100%;
            position: fixed;
            top: 38%;
        }

        .cont_bg {
            width: 100%;
            position: fixed;
            /*bottom: 17%;*/
            z-index: -999;
            /*height: 530px;*/
            top: 25%;
        }

        .cont {
            width: 70%;
            margin: 0 auto;
        }

        .left {
            width: 50%;
            float: left;
        }

        .left img {
            margin-bottom: -4px;
        }

        .right {
            /*width: 100%;*/
            /*position: absolute;*/
            /*right: 14%;*/
        }

        .login {
            width: 450px;
            /*height: 270px;*/
            /*background: #fff;*/
            border-radius: 10px;
            margin: 0 auto;
            text-align: center;
            padding: 30px;
            padding-top: 20px;
            overflow: auto;
            position: relative;
        }

        .cont_img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -9;
        }

        .yhdl {
            width: 100%;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        .yhdl p {
            color: #fff;
            font-size: 34px;
            font-weight: bold;
        }

        .text {
            width: 350px;
            height: 54px;
            margin: 30px auto;
            position: relative;
        }

        .login_input_all {
            width: 296px;
            padding-left: 50px!important;
            height: 54px;
            line-height: 54px;
            border: 1px solid #BDBDBD;
            border-radius: 5px;
            background: #ebebeb;
        }

        .user_pic {
            width: 26px;
            /*border-right: 1px solid #cfcfcf;*/
            position: absolute;
            top: 12px;
            left: 10px;
            padding-right: 10px;
        }

        .password_pic {
            width: 22px;
            padding-right: 12px;
            /*border-right: 1px solid #cfcfcf;*/
            position: absolute;
            left: 12px;
            top: 12px;
        }

        .btn1 {
            width: 100% !important;
            height: 56px;
            background: #40adff;
            border-radius:5px;
            /*background: #297ed7;*/
            /*border: 1px solid #003c79;*/
            padding-left: 0 !important;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 4px;
            float: left;
            border-radius: 3px;
        }
        .btn:hover {
            /*background: #297ed7;*/
        }
        .btn_zc {
            width: 45% !important;
            height: 56px;
            /*background: url("../images/btn_bg.jpg") repeat-x left top;*/
            padding-left: 0 !important;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 4px;
            float: left;
            border: none;
            border-radius: 3px;
        }

        .wjmm {
            width: 350px;
            height: 20px;
            margin: 15px auto;
            margin-top: 0px;
            margin-bottom: 20px;
            text-align: left;
        }

        .wjmm p {
            color: #333333;
        }

        .wjmm p a {
            color: #333333;
            text-decoration: none;
        }

        .yzm {
            width: 155px !important;
            float: left;
        }

        .yzm_pic {
            width: 125px !important;
            height: 50px;
            float: right;
            border: 1px solid #BDBDBD;
        }

        .yzm_pic img {
            width: 100%;
            height: 100%;
        }

        .hyg {
            width: 350px;
            margin: 0 auto;
            text-align: right;
            font-size: 12px;
        }

        .hyg a {
            color: #277ec1;
        }

        .jzmm {
            height: 30px;
            width: 350px;
            margin: 10px auto 0;
            position: relative;
            text-align: right;
            margin-bottom: 0;
            color: #a09c9c;
        }
        .alert {
            /*right: 22%;*/
            right: 44%;
            margin-bottom: 10px;
            position: fixed;
            top: 35%;
        }
        .titleText{
            font-size: 64px;
            color: #fff;
            line-height: 70px;
            font-family: auto;
            letter-spacing: 5px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            // var screenHeight = document.documentElement.clientHeight * 0.44;
            // var loginHeight = document.getElementById("loginForm").offsetHeight;
            // var topHeight = (screenHeight - loginHeight) / 2;
            // $("#loginForm").css("margin-top", topHeight + "px");
            $("#loginForm").validate({
                rules: {
                    validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
                },
                messages: {
                    username: {required: "请填写用户名."}, password: {required: "请填写密码."},
                    validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
                },
                errorLabelContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    error.appendTo($("#loginError").parent());
                }
            });
        });
        // 如果在框架或在对话框中，则弹出提示并跳转到首页
        if (self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0) {
            alert('未登录或登录超时。请重新登录，谢谢！');
            top.location = "${ctx}";
        }
    </script>
</head>
<body>
<img src="${ctxStatic}/images/login/body_bg.jpg" class="body_bg"/>
<div class="header">
    <%--<img src="${ctxStatic}/images/login/title.png" alt=""/>--%>
    <div class="titleText">
        <p>吉林省强制免疫先打后补</p>
        <p style="margin-top: 25px;">信息化管理平台</p>
    </div>
</div>
<div class="content">
    <div class="right">
        <div class="header">
            <div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}"><button data-dismiss="alert" class="close">×</button>
                <label id="loginError" class="error">${message}</label>
            </div>
        </div>
        <form id="loginForm" class="form-signin" action="${ctx}/login" method="post">
            <div class="login">
                <img src="${ctxStatic}/images/login/cont.png" class="cont_img" alt=""/>
                <div class="yhdl">
                    <p>登录</p>
                </div>
                <div class="text">
                    <img src="${ctxStatic}/images/login/user_pic.png" class="user_pic"/>
                    <%--<input type="text" placeholder="请输入用户名" class="login_input_all"/>--%>
                    <input type="text" id="username" name="username" class="input-block-level required login_input_all" value="${username}">
                </div>
                <div class="text" style="margin-bottom: 0;">
                    <img src="${ctxStatic}/images/login/password_pic.png" class="password_pic"/>
                    <%--<input type="password" class="login_input_all"/>--%>
                    <input type="password" id="password" name="password" class="input-block-level required login_input_all">
                </div>
                <div class="text" style="margin-bottom: 10px;">
                    <%--<input type="submit" class="btn" value="登录" style="margin-right: 5%;">--%>
                        <input class="btn btn1 btn-large btn-primary" type="submit" value="登 录"/>
                </div>
            </div>
        </form>
    </div>
</div>
<%--<script src="${ctxStatic}/flash/zoom.min.js" type="text/javascript"></script>--%>
<script>
    if (screen.width == 1920 && screen.height == 1080) {
        $(".login_input_all").css({"height": "54px", "width": "349px", "line-height": "54px"});
    } else if (screen.width == 1600 && screen.height == 900) {
        $(".text").css({"height": "45px", "width": "310px"});
        $(".login_input_all").css({"height": "45px", "width": "310px"});
        $(".yzm_pic").css({"height": "43px"});
        $(".btn1").css({"height": "45px"});
        $(".btn_zc").css({"height": "45px"});
        $(".header img").css({"width": "50%"});
        $(".login").css({"width": "380px"});
        $(".wjmm").css({"width": "310px"});
        $(".right").css({"right": "14%"});
    } else if (screen.width == 1440 && screen.height == 900) {
        $(".text").css({"height": "45px", "width": "310px"});
        $(".login_input_all").css({"height": "45px", "width": "310px"});
        $(".yzm_pic").css({"height": "43px"});
        $(".btn1").css({"height": "45px"});
        $(".btn_zc").css({"height": "45px"});
        $(".header img").css({"width": "50%"});
        $(".login").css({"width": "380px"});
        $(".wjmm").css({"width": "310px"});
        $(".right").css({"right": "14%"});
    }
</script>
</body>
</html>
